<template>
	<view>

		<view class="header-ttop">
			<view @click="angotu">
				<i class="uni-btn-icon" style="color: rgb(255, 255, 255); font-size: 27px;"></i>
			</view>

			<view>
				<view @click="addgoShow">
					{{lo.titleList[0].text}}
				</view>
				<view @click="addgoShow">
					<i class="uni-btn-icon" style="color: rgb(255, 255, 255); font-size: 12px;"></i>
				</view>
			</view>
		</view>

		<u-mask :show="show" @click="show=false">

			<view class="wrao-foofff">
				<view class="wraps">

				</view>
				<view class="warp">
					<view @click="addgose(i)" :class="{'boortttom':i<=3}" v-for="(c,i) in lo.titleList" :key="i" :style="{'background-color':i==0?'#EEEEEE':'#fff',
					'font-weight': i==0?'bold':''}">
						<view class="leftssss" v-if="i==0">

						</view>

						{{c.text}}

					</view>


				</view>
			</view>

		</u-mask>



		<view class="header">
			<u-dropdown menu-icon="arrow-down-fill" menu-icon-size="12" title-size="24" active-color="#3458A2"
				height="100" :border-bottom="true" @open="opens" @close="closes">
				<u-dropdown-item v-for="(c,i) in list" :key="i" :title="c.time">
					
					<view class="slot-content" style="background-color: #FFFFFF;" v-if="i==0">
						
						<view class="arrow-down-fill-one">
							<view class="arrow-down-fill-one-top">
								<view>
									<view>

									</view>
									<view v-for="(c,i) in topList.nian" :key="i" v-if="c.fel==true">
										{{c.text}}
									</view>
									<view>
										<u-icon name="arrow-down" colo="#ccc"></u-icon>
									</view>
								</view>
								<view>
									<view>
									</view>
									<view v-for="(c,i) in topList.yue" :key="i" v-if="c.fel==true">
										{{c.text}}
									</view>
									<view>
										<u-icon name="arrow-down" colo="#ccc"></u-icon>
									</view>
								</view>
								<view>
									<view>
									</view>
									<view v-for="(c,i) in topList.ri" :key="i" v-if="c.fel==true">
										{{c.text}}
									</view>
									<view>
										<u-icon name="arrow-down" colo="#ccc"></u-icon>
									</view>
								</view>
							</view>

							<view class="arrow-down-fill-one-center">
								<view>
									<view v-for="(c,i) in topList.nian" :key="i" :class="{'class-BGC':c.fel}"
										@click="nianCLICK(i)">
										{{c.text}}

									</view>
								</view>
								<view>
									<view v-for="(c,i) in topList.yue" :key="i" :class="{'class-BGC':c.fel}"
										@click="yueCLICK(i)">
										{{c.text}}

									</view>
								</view>
								<view>
									<view v-for="(c,i) in topList.ri" :key="i" :class="{'class-BGC':c.fel}"
										@click="riCLICK(i)">
										{{c.text}}

									</view>
								</view>



							</view>

						</view>
					</view>


					<view class="slot-content" style="background-color: #FFFFFF;" v-if="i==1">

						<view class="arrow-down-fill-tow">
							<view>
								<view>
									<u-icon name="search" size="28"></u-icon>
								</view>
								<view>
									<input type="text" value=""  v-model="input1" @input="change1"/>

								</view>

							</view>

							<view>

								<view v-for="(cc,ii) in getBlocBanks" :key="ii" :class="cc.fel==true?'ct':''"
									@click="getBlocBanksClick(ii,i)">
									{{cc.label}}
								</view>

							</view>


						</view>


					</view>


					<view class="slot-content" style="background-color: #FFFFFF;" v-if="i==2">

						<view class="arrow-down-fill-tow">
							<view>
								<view>
									<u-icon name="search" size="28"></u-icon>
								</view>
								<view>
									<input type="text" value="" v-model="input2" @input="change2"/>

								</view>

							</view>

							<view>


								<view v-for="(cc,ii) in getBlocAreas" :key="ii" :class="cc.fel==true?'ct':''"
									@click="getBlocAreasClick(ii)">
									{{cc.label}}
								</view>





							</view>


						</view>


					</view>


					<view class="slot-content" style="background-color: #FFFFFF;" v-if="i==3||4">

						<view class="arrow-down-fill-san">
							<view v-for="(c,i) in c.options" :key="i">
								{{c.label}}
							</view>

						</view>


					</view>

				</u-dropdown-item>
			</u-dropdown>
		</view>
		<!-- inactive-color -->

		<view class="center-list">
			<view>
				{{text.o}}

			</view>
			<view>
				{{text.l}}亿元
			</view>

		</view>


		<view class="footer-list">

			<view class="footer-list-s" v-for="(c,i) in keylist" :key="i">

				<view class="footer-list-s-header">

					<view>
						<image src="../../index/imgs/financing/zuo1.png" mode=""></image>

					</view>
					<view>
						{{c.title}}
					</view>
					<view>
						<image src="../../index/imgs/financing/you1.png" mode=""></image>
					</view>

				</view>


				<view class="footer-list-s-center">
					<view :class="c.class">
						<qiun-data-charts  :type="c.ss" :chartData="c.chartData" :errorShow="false" :echartsApp="true"
							:inScrollView="true" :disableScroll="true" background="none" :opts="c.list" />
					</view>
				</view>


			</view>

		</view>


		<view class="footer-footer">

			<view class="footer-footer-header">
				<view>明细表</view>
				<view>（单位：亿元）</view>
				<view>
					<i class="el-icon-crop"></i>
				</view>

			</view>

			

			<view class="footer-list-ls">
				<view>
					<view v-for="(c,i) in footerList" :key="i">
						{{c.text}}
					</view>
				</view>

				<view>
					<view v-for="(c,i) in footerLis" :key="i">
						<view>
							{{c.text}}
						</view>
						<view>
							<u-icon name="arrow-down-fill" color="#ccc" size="15"></u-icon>
						</view>
					</view>


				</view>



			</view>

		</view>


		<view class="footeraaaaaaaaaaa">
			<el-table :data="tableData" :cell-style="cellStyle" :header-cell-style="tableHeaderColor">
				<el-table-column prop="area_ORG_NAME" label="地区" width="50">
				</el-table-column>
				<el-table-column prop="bank" label="银行" width="50">
				</el-table-column>
				<el-table-column width="120" prop="loan_WAY" label="-">
				</el-table-column>
				<el-table-column width="50" prop="address1" label="-">
				</el-table-column>
				<el-table-column width="130" prop="koujing_FLAG" label="-">
				</el-table-column>
				<el-table-column width="120" prop="f_VALUE" label="贷款余额">
				</el-table-column>
			</el-table>

		</view>

	</view>
</template>

<script>
	import {
		getBlocBank,
		getBlocArea,
		getBlocKouJingFlag,
		getBlocLoansType,
		getBlocBankLoanBalance,
		getBlocFinancingBank,
		getBlocFinancingArea,
		getBlocTypeDistribution,
		getDetailedTable
	} from '../../../network/page/fianci.js'
	import ld from '../../index/index.js'
	import lo from '../lo.js'
	// import {
	// 	dq,yh
	// } from '../../../network/page/home.js'
	export default {
		data() {
			return {
				list: [{
						time: "截止日期",
						fel: false,
						options: []
					},
					{
						time: "银行",
						fel: false,
						options: []
					},
					{
						time: "地区",
						fel: false,
						options: []
					},
					{
						time: "口径",
						fel: false,
						options: [
						],
					},
					{
						time: "贷款类型",
						fel: false,
						options: [
						],
					}
				],
				text: {
					o: "银行贷款余额",
					l: "1258"
				},
				keylist: [{
						title: '集团融贷贷款银行分布',
						list: ld.list,
						chartData: ld.chartData,
						ss: 'column',
						class: 'charts-box'
					},
					{
						title: '集团融贷贷款地区分布',
						list: ld.lists,
						chartData: ld.chartDatasd,
						ss: 'column',
						class: 'charts-box'
					},
					{
						title: '集团融贷贷款类型分布',
						list: ld.listsd,
						chartData: ld.chartDatas,
						ss: 'ring',
						class: 'asdasd'
					}
				],
				ld: ld,
				lo: lo,
				input2:'',
				input1:'',
				footerList: [{
						text: '地区/银行参数1',
					},
					{
						text: '地区/银行参数2',
					},
					{
						text: '项目分期',
					},
					{
						text: '口径',
					},
					{
						text: '贷款类型',
					}

				],
				footerLis: [{
						text: '地区',
					},
					{
						text: '-',
					},
					{
						text: '不显示',
					},
					{
						text: '不显示',
					},
					{
						text: '不显示',
					}
				],
				tableData: [
				],
				topList: {
					nian: [{
							text: '2017年',
							fel: false
						},
						{
							text: '2018年',
							fel: false
						},
						{
							text: '2019年',
							fel: false
						},
						{
							text: '2020年',
							fel: false
						},
						{
							text: '2021年',
							fel: true
						}
					],
					yue: [{
							text: '1月',
							fel: false
						},
						{
							text: '2月',
							fel: false
						},
						{
							text: '3月',
							fel: false
						},
						{
							text: '4月',
							fel: false
						},
						{
							text: '5月',
							fel: false
						},
						{
							text: '6月',
							fel: true
						},
						{
							text: '7月',
							fel: false
						},
						{
							text: '8月',
							fel: false
						},
						{
							text: '9月',
							fel: false
						},
						{
							text: '10月',
							fel: false
						},
						{
							text: '11月',
							fel: false
						},
						{
							text: '12月',
							fel: false
						}

					],
					ri: []
				},
				DataList: {
					nian: '2021',
					yue: '6',
					ri: ''
				},
				show: false,
				getBlocBanks: [],
				getBlocAreas: [],
				thisGetBlocAreas:[]
			};
		},
		methods: {
			opens(i){
			},
			closes(i){
				if(i==0){
						let ris;
						if(this.DataList.ri.length<2){
							ris=`0${this.DataList.ri}`
							
						}else{
							ris=this.DataList.ri
						}
						let yues;
						if(this.DataList.yue.length<2){
							yues=`0${this.DataList.yue}`
						}else{
							yues=this.DataList.yue
						}
						
						let riqi=`${this.DataList.nian}-${yues}-${ris}`
						
						this.list[i].time=riqi
					 
					
				}
			},
			change2(){
				// getBlocAreas
			    
				
				
				
				if(this.input2.length==0){
					this.getBlocAreas=this.thisGetBlocAreas
					
				}else{
					let l=[]
					this.getBlocAreas.forEach(res=>{
						if(res.label.includes(this.input2)){
							l.push(res)
						}
					})
					l.forEach(res=>{
						res.fel=false
					})
						this.getBlocAreas=l
				}
				
				
			
				
				
				
			},
			change1(){
				// getBlocBanks
				console.log(this.input1)
			},
			getBlocAreasClick(ii) {
				this.getBlocAreas.forEach(res => {
					res.fel = false
				})
				this.getBlocAreas[ii].fel = !this.getBlocAreas[ii].fel
			},
			getBlocBanksClick(ii) {
				this.getBlocBanks.forEach(res => {
					res.fel = false
				})
				this.getBlocBanks[ii].fel = !this.getBlocBanks[ii].fel

			},
			cellStyle(row, column, rowIndex, columnIndex) {
				return 'background:#F7F7F7'
			},
			tableHeaderColor(row) {
				return 'background:#F7F7F7'
			},
			nianCLICK(i) {
				this.topList.nian.forEach(res => {
					res.fel = false
				})
				this.topList.nian[i].fel = true
				let s = this.topList.nian[i].text.split('年')
				this.DataList.nian = s[0]
				this.set()
			},
			yueCLICK(i) {

				this.topList.yue.forEach(res => {
					res.fel = false
				})
				let ss = this.topList.yue[i].text.split('月')
				this.DataList.yue = ss[0]
				this.topList.yue[i].fel = true
				this.set()

			},
			riCLICK(i) {
				this.topList.ri.forEach(res => {
					res.fel = false
				})
				let sss = this.topList.ri[i].text.split('日')
				this.DataList.ri = sss[0]
				this.topList.ri[i].fel = true
			

			},
			set() {
				this.DataList.ri = (new Date(this.DataList.nian, this.DataList.yue, 0)).getDate()

				let ls = []
				for (let index = 0; index < this.DataList.ri; index++) {
					ls.push({
						fel: false,
						text: (index + 1) + '日'
					})
					// console.log(index+1)
				}
				ls[10].fel = true
				this.topList.ri = ls
			},
			addgoShow() {
				this.show = !this.show

			},
			addgose(i) {
				if (i == 0) {}
				if (i == 1) {

					uni.navigateTo({
						url: '../fianci2/fianci2'
					})
				}
				if (i == 2) {
					uni.navigateTo({
						url: '../fianci3/fianci3'
					})
				}
				if (i == 3) {
					uni.navigateTo({
						url: '../fianci4/fianci4'
					})
				}

			},
			angotu() {
				uni.navigateBack()
			}


		},
		mounted() {
			this.set()
			// 下拉请求依次
			getBlocBank().then(res => {
				// console.log('银行')
				let Bank = []
				res.data.data.forEach(res => {
					let banl = {
						label: res,
						fel: false
					}
					Bank.push(banl)
				})
				this.getBlocBanks = Bank
				// console.log('银行')

			})
			getBlocArea().then(res => {
				// console.log('地区')
				let Area = []
				res.data.data.forEach(res => {
					let banls = {
						label: res,
						fel: false
					}
					Area.push(banls)
				})

				this.getBlocAreas = Area
				this.thisGetBlocAreas = Area
				// console.log(Area)
				// console.log('地区')
			})
			getBlocKouJingFlag().then(res => {
				// console.log('口径')
				// console.log(res.data.data)
				let li = []
				res.data.data.forEach(res => {
					let sd = {
						value: res.koujing_FLAG,
						label: res.fk_BALANCE_COLUMN
					}
					li.push(sd)
				})
				this.list[3].options = li
			})
			getBlocLoansType().then(res => {
				// console.log('贷款')
				// console.log(res.data.data)
				let type = []
				res.data.data.forEach(res => {
					let types = {
						value: res,
						label: res
					}
					type.push(types)
				})
				this.list[4].options = type
				// console.log('贷款')
			})
			// 下拉请求依次

			// 图表请求依次
			// 银行贷款余额
			getBlocBankLoanBalance({
				endTime:'',
				area:'',
				bank:'',
				kouJingflag:'FK_AMOUNT_E',
				loanWay:'住宅开发贷',
			}).then(res=>{
				this.text.l=res.data.data/100000000
			})
			// 银行贷款余额
			// 第一张可视图
			getBlocFinancingBank({
				flag :1,
				endTime:'',
				area:'',
				bank:'',
				kouJingflag:'FK_AMOUNT_E',
				loanWay:'住宅开发贷',
				
			}).then(res=>{
				let Financing=[]
				let bank=[]
				res.data.data.forEach(res=>{
					Financing.push(res.f_VALUE)
					bank.push(res.bank)
				})
				ld.chartData.categories=bank
				ld.chartData.series[0].data=Financing
			})
			// 第一张可视图
			
			// 第二张可是图
			getBlocFinancingArea({
				flag :1,
				endTime:'',
				area:'',
				bank:'',
				kouJingflag:'FK_AMOUNT_E',
				loanWay:'住宅开发贷',
			}).then(res=>{
				let Financings=[]
				let banks=[]
				res.data.data.forEach(res=>{
					Financings.push(res.f_VALUE)
					banks.push(res.area_ORG_NAME)
				})
				ld.chartDatasd.categories=banks
				ld.chartDatasd.series[0].data=Financings
				
			})
			// 第二张可是图
			// getBlocTypeDistribution,
			// 第三张可是图
			getBlocTypeDistribution({
				flag :1,
				endTime:'',
				area:'',
				bank:'',
				kouJingflag:'FK_AMOUNT_E',
				loanWay:'住宅开发贷',
			}).then(res=>{
				let butions=[]
				res.data.data.forEach(res=>{
					let bution={
						name:res.loan_WAY,
						value:res.percentage,
					}
					butions.push(bution)
				})
				console.log(ld.chartDatas)
				ld.chartDatas.series[0].data=butions
				console.log(ld.chartDatas)
				
				
			})
			
			// 第三张可是图
			// table
			getDetailedTable({
			}).then(res=>{
				console.log(res)
				this.tableData=res.data.data
			})
			// table


			// 图表请求依次





		},
		created() {
			if (this.$mp.page.route == 'pages/financingT/fianci1/fianci1') {
				console.log(lo.titleList[0])
			}
		
		},
		onNavigationBarButtonTap(e) {
			console.log(e)
		}
	}
</script>
<style scoped src="../../css/css1-10/financingTHeader.min.css"></style>
<style scoped src="../../css/css1-10/endTime/endTime.min.css"></style>
<style lang="scss" scoped>

	.arrow-down-fill-san {
		width: 100vw;
		overflow: hidden;
		font-size: 20upx;

		>view {
			width: 100%;
			display: flex;
			justify-content: center;
			margin: 30upx 0;
		}
	}

	.arrow-down-fill-tow {
		width: 100vw;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;

		>view:nth-child(1) {
			margin-top: 79upx;
			width: 202upx;
			height: 53upx;
			border: 2upx solid #06AFB2;
			border-radius: 5upx;
			margin-bottom: 35upx;
			display: flex;
			align-items: center;

			>view:nth-child(1) {
				margin-left: 10upx;
			}
		}

		>view:nth-child(2) {
			width: 202upx;
			height: 340upx;
			border: 2upx solid #06AFB2;
			border-radius: 5upx;
			margin-bottom: 41upx;
			overflow: hidden auto;
			display: flex;
			flex-direction: column;
			align-items: center;

			.ct {
				background-color: #4DD2D1;
			}

			>view {
				width: 100%;
				font-size: 12upx;
				padding: 15upx 0;
				display: flex;
				justify-content: center;

			}
		}

	}

	.class-BGC {
		background-color: #06AFB2;
		color: #fff;
	}

	


	.footer-list-ls {
		width: 100vw;
		font-size: 18upx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #003894;
		margin-bottom: 34upx;

		>view:nth-child(1) {
			display: flex;
			align-items: center;
			width: 100vw;
			justify-content: space-around;
			padding: 10upx 10upx;

			>view {
				width: 150upx;
				white-space: nowrap;

				transform: scale(0.8);

			}


		}

		>view:nth-child(2) {
			display: flex;
			width: 100vw;
			justify-content: center;
			align-items: center;

			>view {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 140upx;
				padding: 0 8upx;
				border: 1px solid #003894;
			}
		}
	}

	.sddsf {
		background-color: #06AFB2 !important;
		color: #FFFFFF !important;
	}

	

	.footer-footer {
		margin-top: 202upx !important;
	}

	.asdasd {
		width: 100vw;
		height: 492upx;
		border-bottom: 1upx solid #EEEEEE;
	}

	/deep/.u-cell__value[data-v-2c031e35] {
		display: none;
	}

	.footer-list-s {
		.footer-list-s-center {
			width: 100vw;
			height: 326upx;

			.charts-box {
				width: 100%;
				height: 100%;
				border-bottom: 1upx solid #EEEEEE;
				padding: 0 0 20upx 0;
			}
		}
	}


	.center-list {
		width: 690upx;
		height: 117upx;
		background: #F8F8F8;
		box-shadow: 0upx 3upx 9upx 0upx rgba(70, 65, 65, 0.35);
		border-radius: 10upx;
		margin-top: 48upx;
		margin-left: 30upx;
		display: flex;
		justify-content: center;
		align-items: center;

		view:nth-child(1) {

			font-size: 30upx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #333333;
			margin-right: 41upx;

		}

		view:nth-child(2) {

			font-size: 37upx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #F4B544;

		}

	}

	
</style>
